<template>
  <div class="bg">
    <div class="header">
      <div class="date">{{ datestr }}</div>
    </div>
    <div class="content">
      <div class="title-bar">
        <div class="title">设备生产情况</div>
        <div class="legend">
          <div>未完成工单总计 {{ countUNJH }}条</div>
          <div>设备总计 {{ countJTS }}台</div>
          <div>总计 {{ countJTS }}</div>
          <div class="TJ"><i></i>停机 {{ countTJ }}</div>
          <div class="ZT"><i></i>暂停 {{ countZT }}</div>
          <div class="SC"><i></i>生产 {{ countSC }}</div>
          <div class="XF"><i></i>下发 {{ countXF }}</div>
          <div class="WDD"><i></i>无订单 {{ countWDD }}</div>
        </div>
      </div>

      <div class="list-wrapper">
        <div class="th">
          <span>计划单号</span>
          <span>生产日期</span>
          <span>上机日期</span>
          <span>机台</span>
          <span>品名</span>
          <span>交货日期</span>
          <span>预完工日期</span>
          <span>计划数量</span>
          <span>报工数量</span>
          <span>标准班产</span>
          <span v-for="item in dateList" :key="item">{{ dayjs(item).format('MM月DD日') }}</span>
        </div>
        <ul ref="listRef" @mouseenter="pause" @mouseleave="play">
          <li v-for="(item, index) in list" :key="index" :class="isBorder(item, index)">
            <span>{{ item.JHDH }}</span>
            <span>{{ item.SCRQ }}</span>
            <span>{{ item.SJRQ }}</span>
            <span>{{ item.JT }}</span>
            <span>{{ item.CP }}</span>
            <span>{{ item.JHRQ }}</span>
            <span>{{ item.YWGRQ }}</span>
            <span>{{ item.JHSL }}</span>
            <span>{{ item.BGSL }}</span>
            <span>{{ item.BZBC }}</span>
            <div class="date-wrapper">
              <div v-show="item.JHZT == '开工' && !dayjs(item.YWGRQ).isBefore(dayjs(dateList[0]))" class="green"
                :style="`width: ${item.plannedWidth}%; margin-left: ${item.emptyWidth}%`">{{ item.BGSL }} / {{
                  item.BGSLPersent }}%</div>
              <div v-show="item.JHZT == null" class="yellow"
                :style="`width: ${item.plannedWidth}%; margin-left: ${item.emptyWidth}%`"></div>
              <div v-show="item.JHZT == '开工' && item.extraDays" class="red" :style="`width: ${item.extraWidth}%`">延期完成
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

// 日期时间
const datestr = ref()
let timer1
const getTime = () => {
  timer1 = setInterval(() => {
    datestr.value = dayjs().format("YYYY-MM-DD HH:mm:ss")
  }, 1000)
}

const listRef = ref()
let scrollTop = ref(0) // 滚动高度
let isBottom = false // 是否触底
let timer2
let timer3
const scroll = () => {
  timer2 = setInterval(() => {
    scrollTop.value++
    listRef.value.scrollTop = scrollTop.value
    // 滚动到底部3秒后从头开始
    if (scrollTop.value + listRef.value.clientHeight >= listRef.value.scrollHeight) {
      isBottom = true
      clearInterval(timer2)
      timer3 = setTimeout(() => {
        scrollTop.value = 0
        isBottom = false
        scroll()
      }, 3000)
    }
  }, 40)
}

// 鼠标移入暂停滚动
const pause = () => {
  clearInterval(timer2)
  clearTimeout(timer3)
}
const play = () => {
  scroll()
}

// 日期范围
const dateList = ref([])
const createDateList = () => {
  for (let i = -1; i < 7; i++) {
    dateList.value.push(dayjs().add(i, 'day').format('YYYY-MM-DD'))
  }
}

// 获取列表
const list = ref([])
const countUNJH = ref(0) // 未完成数量
const countJTS = ref(0) // 设备数量
const countTJ = ref(0)
const countZT = ref(0)
const countSC = ref(0)
const countXF = ref(0)
const countWDD = ref(0)
const getList = async () => {
  const response = await fetch('/jiashuo/data/board2.json')
  const listData = await response.json()
  // 去掉完工
  list.value = listData.filter(i => i.JHZT != '完工')
  scroll()
  let firstDay = dayjs(dateList.value[0]) // 日期范围的第一天
  for (let i of list.value) {
    // 计算计划的天数
    // 如果上机日期在昨天之前，则从昨天开始算，否则从上机日期开始算
    if (dayjs(i.SJRQ).isBefore(firstDay)) {
      i.plannedDays = dayjs(i.YWGRQ).diff(firstDay, 'day') + 1
    } else {
      i.plannedDays = dayjs(i.YWGRQ).diff(dayjs(i.SJRQ), 'day') + 1
      // 上机日期在昨天之后，在色块前面留空
      i.emptyDays = dayjs(i.SJRQ).diff(firstDay, 'day')
    }
    // console.log(i.plannedDays, i.emptyDays)

    // 色块长度
    if (i.plannedDays > 0) {
      i.plannedWidth = i.plannedDays / 8 * 100
    } else {
      i.plannedWidth = 0
    }

    // 留空长度
    if (i.emptyDays > 0) {
      i.emptyWidth = i.emptyDays / 8 * 100
    }

    // 计算延期天数
    // 如果今天在预完工日期后
    if (dayjs(dateList.value[1]).isAfter(dayjs(i.YWGRQ))) {
      i.extraDays = dayjs(dateList.value[1]).diff(dayjs(i.YWGRQ), 'day')
      i.extraDays = i.extraDays > 2 ? 2 : 1 // 页面上超出天数只可能能是1天或2天
      i.extraWidth = i.extraDays / 8 * 100
    }
    // console.log('超出', i.extraDays)

    // 报工数量百分比
    i.BGSLPersent = ((i.BGSL / i.JHSL) * 100).toFixed(1)
  }

  // 计算机台状态数量
  countUNJH.value = list.value.length ? list.value[0].UNJH : 0
  countJTS.value = list.value.length ? list.value[0].JTS : 0
  countTJ.value = list.value.filter(i => i.JTZT == '停机').length
  countZT.value = list.value.filter(i => i.JTZT == '暂停').length
  countSC.value = list.value.filter(i => i.JTZT == '生产').length
  countXF.value = list.value.filter(i => i.JTZT == '下发').length
  countWDD.value = list.value.filter(i => i.JTZT == '无订单').length
}

// 相同机台号合并行，只有一个边框
const isBorder = (item, index) => {
  if (index > 0 && item.JT == list.value[index - 1].JT) {
    return 'group'
  }
}


onMounted(() => {
  getTime()
  createDateList()
  getList()
})
onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
  clearTimeout(timer3)
});
</script>

<style lang="scss" scoped>
.bg {
  height: 100vh;
  background: url("@/assets/img/bg2.jpg");
  background-size: 100% 100%;
}

.header {
  height: 80px;
  height: 7.41vh;

  .date {
    position: absolute;
    right: 3.2%;
    top: 1.6vh;
    font-size: 16px;
    color: #16c1c0;
  }
}

.content {
  height: calc(100% - 7.41vh - 3vh);
  margin: 1vh 1% 0 1%;
  padding: 1.5vw;
  border-radius: 8px;
  background: #2c344b;

  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4vh;
    color: #fff;

    // border: 1px solid #fff;
    .title {
      font-size: 22px;
    }
  }

  .legend {
    display: flex;
    font-size: 16px;
    color: #fff;

    div {
      margin-right: 20px;

      i {
        display: inline-block;
        vertical-align: middle;
        width: .8vw;
        height: .8vw;
        margin-right: 4px;
        border: 3px double #fff;
        border-radius: 50%;
      }

      &.TJ i {
        border-color: #f90505;
      }

      &.ZT i {
        border-color: #e1d004;
      }

      &.SC i {
        border-color: #00ab45;
      }

      &.XF i {
        border-color: #aad7f2;
      }

      &.WDD i {
        border-color: #4491c0;
      }
    }
  }
}

.list-wrapper {
  height: calc(100% - 4vh - 1vh);
  margin-top: 1vh;
  border: 1px solid #bbb;
}

.th {
  display: flex;
  height: 3.5vh;
  font-size: 18px;
  color: #8fc3e3;
  border-bottom: 1px solid #bbb;

  span {
    flex-shrink: 0;
    flex-grow: 1;
    width: 5.5%;
    text-align: center;
    line-height: 3.5vh;
    white-space: nowrap;

    // border: 1px dashed #fff;
    &:nth-child(1) {
      width: 8%;
    }

    &:nth-child(4) {
      width: 4%;
    }

    &:nth-child(10) {
      border-right: 1px solid #bbb;
    }
  }
}

ul {
  position: relative;
  height: calc(100% - 3.5vh);
  overflow: hidden;

  // border: 1px solid #f00;
  li {
    display: flex;
    // height: 268px;
    height: 4vh;
    font-size: 16px;
    color: #fff;
    border-top: 1px solid #bbb;

    &.group {
      border-top: none;
    }

    span {
      flex-shrink: 0;
      width: 5.5%;
      white-space: nowrap;
      text-align: center;
      line-height: 4vh;

      // border: 1px dashed #fff;
      &:nth-child(1) {
        width: 8%;
      }

      &:nth-child(4) {
        width: 4%;
      }

      &:nth-child(10) {
        border-right: 1px solid #bbb;
      }
    }

    .date-wrapper {
      flex-grow: 1;
      display: flex;

      div {
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 4vh;
        white-space: nowrap;

        &.green {
          background: #2ab65f;
        }

        &.yellow {
          background: #f6aa3a;
        }

        &.red {
          background: #e60104;
        }
      }
    }

    &.group .date-wrapper div {
      border-top: 1px solid #bbb;
    }
  }
}
</style>